import React, {Component,} from "react";
// import {connect}
import Admin from "../../../layout/Admin";
import {
    Button,
    Divider,
    Form,
    Input,
    PageHeader,
    Progress,
    Upload,
    message,
    Modal,
    Table,
    Popconfirm,
    Alert,
} from "antd";
import MessageModel from "../../../model/message";

class Message extends Component {

    constructor(props) {
        super(props)
        this.messageModel = new MessageModel('user')
        this.state = {
            list: [],
            form: {
                title: '',
                txt: '',
            },
            modal: {
                add: false,
            }
        }
    }

    componentDidMount() {
        this.all()
    }

    all = () => {

        const m = this.messageModel
        m.all().then((resp) => {
            const listString = resp.data.ok
            const list = listString.map(item => JSON.parse(item))
            this.setState({
                list,
            })
        })

    }

    add = (params) => {
        let m = this.messageModel
        m.add(params)
            .then(res => {
                const data = res.data
                if (data.ok === 1) {
                    message.success('添加成功')
                    this.emptyForm()
                    this.modalCancel('add')
                }
            })
            .then(() => this.all())
    }

    delete = (record) => {

        const m = this.messageModel
        const id = record.id
        m.delete({id,})
            .then(resp => {
                const data = resp.data
                if (data.ok === 1) {

                    message.success('删除成功');
                }
            })
            .then(() => {
                this.all()
            })
    }

    clear = () => {
        const m = this.messageModel
        m.clear()
            .then(resp => {
                const data = resp.data
                if (data.ok === 1) {
                    message.success('清空成功')
                }
            })
            .then(() => {
                this.all()
            })
    }

    emptyForm = () => {
        this.form.resetFields()
    }

    modalShow = (key) => {
        this.setState({
            modal: {
                [key]: true
            },
        })
    }

    modalCancel = (type) => {
        this.setState({
            modal: false,
        })
    }

    onFinish = (params) => {

        const {title, txt} = params
        const isEmpty = title === '' || txt === ''
        if (isEmpty) {
            message.error('不能为空')
            return
        }

        this.add(params)
    }

    formatTime = (dateObj) => {
        return dateObj.toLocaleString()
    }

    cancelAdd = () => {
        this.emptyForm()
        this.modalCancel('add')
    }


    render() {
        const header = <div style={{background: '#fff'}}>
            <PageHeader title='系统消息'/>
        </div>

        const layout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        }

        const addForm = <Form
            {...layout}
            ref={el => this.form = el}
            initialValues={this.state.form}
            onFinish={this.onFinish}
        >
            <Form.Item
                label="标题"
                name="title"
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="内容"
                name="txt"
            >
                <Input.TextArea />
            </Form.Item>

            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 4 }}>

                <Button onClick={this.cancelAdd}  style={{marginRight: '8px',}}>
                    取消
                </Button>

                <Button type="primary" htmlType="submit">
                    添加
                </Button>

            </Form.Item>
        </Form>

        const addModal = <Modal
            title='添加系统消息'
            visible={this.state.modal.add}
            footer={null}
            maskClosable={true}
            onCancel={() => this.modalCancel('upload')}
        >
            {addForm}
        </Modal>


        // {"id":37,"title":"title","txt":"content","t":1585729501}
        const columns = [
            {
                title: 'id',
                dataIndex: 'id',
                render: text => <span>{text}</span>,
            },
            {
                title: '详情',
                dataIndex: 'txt',
                render: text => <span>{text}</span>,
            },
            {
                title: '标题',
                dataIndex: 'title',
                render: text => <span>{text}</span>,
            },
            {
                title: '创建时间',
                dataIndex: 't',
                render: text => <span>{this.formatTime(new Date(text * 1000))}</span>,
            },
            {
                title: '操作',
                dataIndex: '操作',
                render: (text, record) => (
                    <Popconfirm
                        title="确定删除?"
                        onConfirm={(e) => this.delete(record)}
                    >
                        <a>删除</a>
                    </Popconfirm >
                ),
            },

        ]

        const table = <div className='list-container'>

            <div style={{marginBottom: '16px',}}>
                <Button
                    onClick={() => this.modalShow('add')}
                    style={{marginRight: '8px'}}
                >添加系统消息</Button>
                <Popconfirm
                    title="确定清空?"
                    onConfirm={(e) => this.clear()}
                >
                    <Button>清空系统消息</Button>
                </Popconfirm>
            </div>

            <Table
                dataSource={this.state.list}
                columns={columns}
                rowKey={(record, index) => index}
            />


        </div>

        return <>
            {addModal}
            <Admin>
                {header}
                {table}
            </Admin>
        </>
    }

}

export default Message
